<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-10 15:06:47
-->
<template>
  <div>
    <div ref="BarChart" id="BarChart" class="bar-chart" v-show="chartData.dataset"/>
    <no-data-view-new
      v-show="!chartData.dataset && !isLoading"
      :notice-msg="$t('common.base.tip.noData')"
      style="height:500px;"
    ></no-data-view-new>
  </div>
</template>

<script>
import _ from 'lodash';
import { useBarChartOption } from './useChartData';
import NoDataViewNew from '@src/component/common/NoDataViewNew';

export default {
  name: 'bar-chart',
  props: {
    chartData: {
      type:Object
    },
    isLoading:{
      type:Boolean,
      default:false
    },
  },
  components: {
    [NoDataViewNew.name]: NoDataViewNew,
  },
  watch:{
    'chartData'(){
      this.chart.value.resize(); 
      this.drawChart()
    },
  },
  data(){
    return {
      chart:{
        value: null
      },
      defaultOption: useBarChartOption()
    }
  },
  methods:{
    initChart() {
      let ref = this.$refs.BarChart;
      this.chart.value = this.$echarts.init(ref, 'shb');
    },
    drawChart() {
      this.chart.value.clear();
      // let option = _.merge(useBarChartOption(), this.chartData); // 使用defaultOption不会刷新数据
      let option = useBarChartOption();
      for(let key in this.chartData){
        let item = this.chartData[key];
        if(option.key){
          option[key] = {
            ...option[key],
            ...item
          }
        }else{
          option[key] = item
        }
      }
      if(!this.chartData.dataset) return
      this.chart.value.setOption(option, true);
    }
  },
  mounted(){
    this.initChart();
  },
  destroyed(){
    if (!this.chart.value) return;

    this.chart.value = null;
  }
};
</script>

<style lang="scss" scoped>
.bar-chart {
  width: calc(100vw - 100px);
  height: 500px;
}
</style>
